<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app">
        <my-head></my-head>
        <my-logo></my-logo>
    </div>
    <script>
        //局部组件
        let MyHead = {
            template: `
            <header>
              <my-logo></my-logo>
              <h2>my-head</h2>
              <ul>
                <li>首页</li>
                <li>视频</li>
                <li>音乐</li>
              </ul>
            </header>
          `
        }

        let MyLogo = {
            template: `
              <h2>my-logo</h2>
          `
        }

        //根组件
        let RootApp = {
            data(){
                return {
                }
            },
        }

        let app = Vue.createApp(RootApp)

        // //全局组件 在vue任何地方都可以注册
        app.component('my-head', MyHead );
        app.component('my-logo', MyLogo );

        let vm = app.mount('#app');
    </script>
</body>
</html>